<template>
<div class="newMusic">
	<div class="m-homeremd">
  		<h2 class="remd_tl">最新音乐</h2>
  	</div>
  	<!--<div class="remd_newsg">
  		<div class="m-sgitem" v-for="(item,index) in list">
  			<div class="sgfr">
  				<div class="sgchfl">
  					<div class="sgtl">{{item.name}}<span class="sgalia" v-if="item.song.album.alias.length>0">({{item.song.album.alias[0]}})</span></div>
  					<div class="sginfo"><i class="sghot"></i>{{ artistsName(item.song.artists)}} - {{item.song.album.name}}</div>
  				</div>
  				<div class="sgchfr">
  					<div class="sgchply"></div>
  				</div>
  			</div>
  			
  		</div>
  		
  	</div>-->
  	
  	<music-list :list="mylist"></music-list>
  	
</div>
</template>

<script>
	import axios from 'axios'
	import api from '@/api'
	import musicList from '@/components/musicList'
	
	
	export default {
		name:'newMusic',
		
		mounted(){
			axios.get(api.newSong).then((res)=>{
				this.mylist=res.data.result;
				console.log(res.data.result)
			})
			.catch((e)=>{
				
			})
		},
		data(){
			return {
				mylist:''
			}
		},
		methods:{
			artistsName(arr){
				if(arr.length==1){
					return arr[0].name;
				}else
				if(arr.length>1){
					var temp='';
					arr.forEach(function(el,index){
						if(index==arr.length-1){
							temp=temp+el.name;
						}else{
							temp=temp+el.name+'/';
						}
						
					})
					return temp;
				}
			}
		},
		components:{
			musicList
		}
	}
	
</script>

<style lang="scss" scoped="scoped">
@import '../scss/common';
@import '../scss/reset';

.sghot{
		display: inline-block;
	    width: r(24px);
	    height: r(16px);
	    margin-right: r(8px);
	    background: url(../../public/img/index_icon_2x.png) no-repeat;
	    background-size: r(332px) r(194px);
	    
	}
.m-homeremd{
	padding-top: r(40px);
	
	.remd_tl{
		text-align: left;
		position: relative;
	    padding-left: r(18px);
	    margin-bottom: r(28px);
	    font-size: r(34px);
	    height: r(40px);
	    line-height: r(40px);
    &::after{
    	content: " ";
	    position: absolute;
	    left: 0;
	    top: 50%;
	    margin-top: r(-18px);
	    width: r(4px);
	    height: r(32px);
	    background-color: #d33a31;
    }
	}
	    
}
/*.remd_newsg{
	position: relative;
    min-height: 20px;
    text-align: left;
}
.m-sgitem{
	display: flex;
	padding-left: r(20px);
	
	.sgfr{
		flex: 1 1 auto;
		display: flex;
    	position: relative;
    	border-bottom: r(2px) solid rgba(0,0,0,.1);	
    	.sgchfl{
    		padding: r(12px) 0;
    		width: 0;
    		-webkit-box-flex: 1;
		    -webkit-flex: 1 1 auto;
		    flex: 1 1 auto;
    	}
	}
	
}
.sgtl{
	
	font-size: r(34px);
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}
.sginfo{
	font-size: r(24px);
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}
.sgchfr{
	display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 r(20px);
    .sgchply{
    	display: inline-block;
	    width: r(44px);
	    height: r(44px);
	    
	    background: url(../../public/img/index_icon_2x.png) no-repeat;
	    background-position: -24px 0;
	    background-size: r(332px) r(194px);
    }
}*/

</style>